<template>
  <view>
    <uni-list>
      <uni-list-item title="事务名称">
        <template v-slot:footer>
          <view class="detail">
            {{ detail.matterName }}
          </view>
        </template>
      </uni-list-item>
      <uni-list-item title="事务分类">
        <template v-slot:footer>
          <view class="detail">
            {{ detail.category }}
          </view>
        </template>
      </uni-list-item>
      <uni-list-item title="负责部门">
        <template v-slot:footer>
          <view class="detail">
            {{ detail.department }}
          </view>
        </template>
      </uni-list-item>
      <uni-list-item title="负责人">
        <template v-slot:footer>
          <view class="detail">
            {{ detail.handler }}
          </view>
        </template>
      </uni-list-item>
      <uni-list-item title="联系方式">
        <template v-slot:footer>
          <view class="detail">
            {{ detail.mobilePhone }}
          </view>
        </template>
      </uni-list-item>
      <uni-list-item title="是否可办理">
        <template v-slot:footer>
          <view class="detail">
            {{ detail.enabled === 0 ? '不可办理' : '可以办理' }}
          </view>
        </template>
      </uni-list-item>
      <uni-list-item title="办理形式">
        <template v-slot:footer>
          <view class="detail">
            {{ detail.conduct }}
          </view>
        </template>
      </uni-list-item>
      <uni-list-item title="办理地址">
        <template v-slot:footer>
          <view class="detail">
            {{ detail.address ? detail.address : '-' }}
          </view>
        </template>
      </uni-list-item>
    </uni-list>
    <uni-section title="详情描述" style="margin: 0 10rpx">
      <p class="detail-desc">
        {{ detail.description ? detail.description : '-' }}
      </p>
    </uni-section>
  </view>
  <view class="btns">
    <view @click="jumpToHandler" v-if="detail.enabled === 1">
      <uni-icons customPrefix="iconfont" size="24" type="icon-email"></uni-icons>
      我要办理
    </view>
    <view @click="handleCall">
      <uni-icons customPrefix="iconfont" size="24" type="icon-phone"></uni-icons>
      拨打电话
    </view>
  </view>
</template>

<script setup>
  import { GetMatterInfo } from '@/apis/matter.js'
  import { onLoad } from '@dcloudio/uni-app'
  import { ref } from 'vue'

  const detail = ref()

  function jumpToHandler() {
    if (detail.value.address.startsWith('http')) {
      uni.navigateTo({
        url: `/pages/webview/webview?url=${detail.value.address}`
      })
    } else {
      uni.navigateTo({
        url: `/pages/onlineService/form/form?id=${detail.value.matterID}&name=${detail.value.matterName}`
      })
    }
  }

  function handleCall() {
    uni.makePhoneCall({
      phoneNumber: detail.value.mobilePhone
    })
  }

  onLoad(async (e) => {
    await GetMatterInfo({
      matterID: e.id
    }).then((res) => {
      detail.value = res.data
      console.log(detail.value)
    })
  })
</script>

<style lang="scss" scoped>
  .detail {
    font-size: 24rpx;
    line-height: 40rpx;
  }

  .detail-desc {
    padding: 0 20rpx;
    font-size: 24rpx;
    text-align: justify;
    text-justify: inter-word;
    text-indent: 2em;
  }

  .btns {
    position: fixed;
    display: flex;
    justify-content: space-around;
    align-items: center;
    bottom: 0;
    left: 0;
    height: 120rpx;
    width: 100%;
    background-color: #a8d2fa;
    text-align: center;
    line-height: 100rpx;

    view {
      &:active {
        filter: contrast(0.8);
      }
    }
  }
</style>
